<template>
  <div class="toolbar">
    <div class="sort-options">
      <select v-model="sortOption" @change="changeSort">
        <option value="default">默认排序</option>
        <option value="price_asc">价格从低到高</option>
        <option value="price_desc">价格从高到低</option>
        <option value="sold_asc">销量从第到高</option>
        <option value="sold_desc">销量从高到低</option>
      </select>
    </div>
    <div class="view-options">
      <button
          :class="{ active: viewMode === 'grid' }"
          @click="changeView('grid')"
      >
        网格
      </button>
      <button
          :class="{ active: viewMode === 'list' }"
          @click="changeView('list')"
      >
        列表
      </button>
    </div>
  </div>
</template>

<script setup>
import {ref,} from 'vue'

const emit = defineEmits(['sort-changed', 'view-changed']);
const sortOption = ref('default')
const viewMode = ref('grid')

const changeSort = () => {
  emit('sort-changed', sortOption.value)
}

const changeView = (mode) => {
  viewMode.value = mode
  emit('view-changed', mode)
}
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.sort-options select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

.view-options button {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 5px;
}

.view-options button.active {
  background: #007BFF;
  color: white;
  border-color: #007BFF;
}

@media (max-width: 768px) {
  .toolbar {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
}
</style>